:global(:root) {
  --chat-nickname-color-default: var(--primary-highlight);
  --chat-nickname-color-anonymous: var(--primary-base);
  --chat-form-border: var(--background-highlight);
  --chat-form-background: var(--background-base);
}

.chat-container--inner {
  padding: var(--p-2);
  background: transparent;
  text-shadow: var(--chat-text-shadow);

  .messages {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    mask-image: linear-gradient(0deg, black 0%, black 75%, transparent 100%);
    height: 20vh;

    &--inner {
      overflow: auto;
      .message {
        .nick {
          font-weight: bold;
          color: var(--chat-nickname-color-default);
          margin-right: var(--m-1);
          display: inline;

          &.anonymous {
            color: var(--chat-nickname-color-anonymous);
          }

          & .anontag {
            display: inline;
            font-weight: normal;
            font-size: 0.55em;
            color: var(--text-base);
            opacity: 0.5;
            margin-left: var(--m-1);
          }
        }

        .content {
          display: inline;
          line-break: anywhere;
        }
      }
    }

    .form {
      background: var(--chat-form-background);
      padding: var(--p-2);
      border: 1px solid var(--chat-form-border);
      border-radius: var(--border-radius);
      margin-top: var(--m-2);

      .form-item {
        margin-top: var(--m-2);
      }
    }
  }

  .chat-input {
    margin-top: var(--m-2);
  }
}